<template>
  <div>
    <div class="city-search">
      <input class="city-search-input" v-model="keyword" type="text" placeholder="输入城市名或拼音">
    </div>
    <div 
    class="search-content" 
    ref="search"
    v-show="keyword"
    >
      <ul>
        <li 
        class="search-item border-bottom" 
        v-for="item in list" 
        :key="item.id"
        @click="handleCityClick(item.name)"
        >{{item.name}}</li>
        <li v-show="hasNoData" class="search-item border-bottom">没有找到匹配数据</li>
      </ul>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import {mapMutations} from 'vuex'
  export default {
    name:'CitySearch',
    props:{
      cities:Object
    },
    data(){
      return {
        keyword:'',
        list:[],
        timer:null
      }
    },
    computed:{
      hasNoData(){
        return !this.list.length
      }
    },
    methods:{
      handleCityClick(city){
        this.changeCity(city)
        this.$router.push('/home')
      },
      ...mapMutations(['changeCity'])
    },
    mounted(){
      this.scroll=new Bscroll(this.$refs.search)
    },
    watch:{
      keyword () {
        if(this.timer){
          clearTimeout(this.timer)
        }
        if(!this.keyword){
          this.list=[]
          return
        }
        this.timer=setTimeout(()=>{
          const result=[];
          for(let i in this.cities){
            this.cities[i].forEach(value=>{
              if(value.spell.indexOf(this.keyword) > -1 ||value.name.indexOf(this.keyword) > -1){
                result.push(value)
              }
            })
          }
          this.list=result
        },100)
      }
    }
  }
</script>

<style lang="stylus" scoped>
@import '~css/mixins.styl'
.city-search
  height .72rem 
  padding 0 .1rem
  padding-right .5rem
  background-color $bgColor
  &-input
    width 100%
    height .62rem
    line-height .62rem
    text-align center
    border-radius .06rem
    color #666
    padding 0 .1rem
    padding-right .3rem
.search-content
  z-index 1
  overflow hidden
  position absolute
  top 1.58rem
  left 0
  right 0
  background-color #eee
  bottom 0 
  .search-item
    line-height .62rem
    padding-left .2rem
    color #666
    background-color #fff
</style>